<template>
  <div>
    <div class="tabBox-wrap">
      <div class="content-wrap">
        <div style="margin-bottom: 5px;">
          <el-select size="mini" v-model="tValue" @change="handle_hundred">
            <el-option v-for="(it, i) in typeSelect" :key="i" :label="it.indexName" :value="it.indexCode"></el-option>
          </el-select>
        </div>
        <div class="pro-content-wrap">
          <div class="left-box" id="barLine">
            <div class="article-title">
              <p>各单位投资预算完成情况</p>
              <span></span>
            </div>
            <BarLine :barData="tableData" :id="'tab3-11'" v-loading="showTableLoading1"></BarLine>
          </div>
          <div class="right-box" id="barLine">
            <div class="article-title">
              <p>各单位投资结转情况</p>
              <span></span>
            </div>
            <BarLine :barData="tableData" :id="'tab3-12'" v-loading="showTableLoading1"></BarLine>
          </div>
        </div>
        <div class="article-title">
          <p>在建项目分单位</p>
          <span>单位：万元</span>
        </div>

        <div class="tableBox">
          <el-table :data="tableData" stripe size="mini" class="tableTh28" v-loading="showTableLoading1">
            <el-table-column prop="jsdwF" label="分类网" width="180"></el-table-column>
            <el-table-column prop="yusuan" label="预算数" width="180"></el-table-column>
            <el-table-column prop="projectFee" label="主项总投资"></el-table-column>
            <el-table-column prop="totalProjectFee" label="累计资本性支出"></el-table-column>
            <el-table-column prop="projectNum" label="本年资本性支出"></el-table-column>
            <el-table-column prop="yusuanPer" label="投资完成率"></el-table-column>
            <el-table-column prop="proJz" label="项目结转额"></el-table-column>
            <el-table-column prop="jzPer" label="项目结转率">
              <template slot-scope="{row}">
                <span>{{row.jzPer&&row.jzPer||0}}%</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <div class="tabBox-wrap">
      <div class="content-wrap">
        <div class="pro-content-wrap">
          <div class="left-box" id="barLine">
            <div class="article-title">
              <p>各专业投资预算完成情况</p>
              <span></span>
            </div>
            <BarLine :barData="tableData2" :id="'tab3-21'" v-loading="showTableLoading2"></BarLine>
          </div>
          <div class="right-box" id="barLine">
            <div class="article-title">
              <p>各专业投资结转情况</p>
              <span></span>
            </div>
            <BarLine :barData="tableData2" :id="'tab3-22'" v-loading="showTableLoading2"></BarLine>
          </div>
        </div>
        <div class="article-title clear">
          <div>
            <el-select v-model="selectvalue" placeholder="请选择" size="mini" @change="changSelect">
              <el-option v-for="(item,index) in selectoptions" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </div>
          <span>单位：万元</span>
        </div>

        <div class="tableBox">
          <el-table :data="tableData2" stripe size="mini" class="tableTh28" height="400" v-loading="showTableLoading2">
            <el-table-column prop="yjzymcI" label="分类网" width="180"></el-table-column>
            <el-table-column prop="yusuan" label="预算数" width="180"></el-table-column>
            <el-table-column prop="projectFee" label="主项总投资"></el-table-column>
            <el-table-column prop="totalProjectFee" label="累计资本性支出"></el-table-column>
            <el-table-column prop="projectNum" label="本年资本性支出"></el-table-column>
            <el-table-column prop="yusuanPer" label="投资完成率"></el-table-column>
            <el-table-column prop="proJz" label="项目结转额"></el-table-column>
            <el-table-column prop="jzPer" label="项目结转率">
              <template slot-scope="{row}">
                <span>{{row.jzPer&&row.jzPer||0}}%</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BarLine from "./barLine";
import { $budgetAPI } from "@/api/";
import { getSessionStorage } from "@/common/js/storage";
export default {
  components: {
    BarLine,
  },
  data() {
    return {
      selectoptions: [],
      selectvalue: undefined,
      showTableLoading1: true,
      showTableLoading2: true,
      tableData: [],
      tableData2: [],
      typeSelect: [],
      tValue: "HR000",
      areaId: JSON.parse(getSessionStorage("accountInfo")).areaId,
    };
  },
  created() {
    this.init();
  },
  methods: {
    getTypeSelect() {
      return new Promise((resolve, reject) => {
        $budgetAPI.getKanBanHundredYuanList(
          {
            acctYear: this.MaxacctMonth.substr(0, 4),
          },
          (res) => {
            if (res && res.code == 0) {
              resolve(
                [{ indexCode: "HR000", indexName: "全部" }].concat(res.content)
              );
            } else {
              reject([]);
            }
          }
        );
      });
    },
    handle_hundred(val) {
      this.tValue = val;
      this.getKanBanBuilderCompanyDataList();
    },
    init() {
      this.getKanBanCompany();

      this.getKanBanBuilderCompanyDataList();
    },
    async getKanBanCompany() {
      let result = await this.fetch($budgetAPI.getKanBanCompany);

      var areaId = this.areaId;
      let { MaxacctMonth } = await this.fetch(
        $budgetAPI.getKanBanYuanMaxAcctMonth,
        {
          areaId,
        }
      );
      this.MaxacctMonth = MaxacctMonth;
      this.typeSelect = await this.getTypeSelect();
      this.selectoptions = result;
      this.selectvalue = result[0];
      this.getKanBanBuilderMajorDataList();
    },
    async getKanBanBuilderCompanyDataList() {
      try {
        this.showTableLoading1 = true;
        let { dataList } = await this.fetch(
          $budgetAPI.getKanBanBuilderCompanyDataList,
          {
            indexCode: this.tValue,
          }
        );
        this.tableData = dataList;
        // console.log(dataList);
      } catch (error) {
        console.log(error);
      } finally {
        this.showTableLoading1 = false;
      }
    },
    async getKanBanBuilderMajorDataList() {
      try {
        this.showTableLoading2 = true;
        let { dataList } = await this.fetch(
          $budgetAPI.getKanBanBuilderMajorDataList,
          {
            jsdwJ: this.selectvalue,
          }
        );
        // console.log(dataList);
        this.tableData2 = dataList;
      } catch (error) {
        console.log(error);
      } finally {
        this.showTableLoading2 = false;
      }
    },
    changSelect(v) {
      this.selectvalue = v;
      this.getKanBanBuilderMajorDataList();
    },
    fetch(action, params) {
      return new Promise((resolve, reject) => {
        action(
          { ...params },
          (res) => {
            if (res.code === 0) {
              resolve(res.content);
            } else {
              reject({});
            }
          },
          (err) => {}
        );
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  //   height: 8000px;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  position: relative;
  z-index: 101;
  padding: 20px;
  main {
    // background: #fff;
    // height: 400px;
    width: inherit;
    .card-wrap {
      width: inherit;
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;

      .card {
        flex: 1;
        border-radius: 20px;
        min-height: 205px;
        box-shadow: 0px 2px 15px 1px rgba(0, 0, 0, 0.1);
        padding: 10px 16px;
        box-sizing: border-box;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        top: 0;
        transition: all 0.5s ease;
        &:hover {
          box-shadow: 0px 2px 10px 3px rgba(0, 0, 0, 0.25);
          top: 4px;
        }
        > div {
          flex: 1 1 0;
        }

        > :not(:last-child) {
          border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
        }

        .card-title {
          display: flex;
          align-items: center;

          > p {
            transition: all 0.5s ease;
            font-size: 14px;
            display: inline-block;
            font-weight: bold;
            padding-left: 10px;
            position: relative;
            &::before {
              content: "";
              width: 4px;
              height: 16px;
              background-color: #fff;
              position: absolute;
              left: 0;
              top: 50%;
              transform: translate(0, -50%);
            }
          }
        }
        .card-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .row-left {
            p {
              font-size: 12px;
              font-weight: 600;
            }
            span {
              display: inline-block;
              font-size: 12px;
              color: rgba(255, 255, 255, 0.7);
            }
          }
          .row-right {
            span {
              font-size: 16px;
              font-weight: 600;
            }
          }
        }

        &:nth-child(1) {
          background: url(../../../assets/images/card/1@2x.png) no-repeat 100%
              0%,
            linear-gradient(-45deg, #79b6ff, #93d4ff);
        }
        &:nth-child(2) {
          background: url(../../../assets/images/card/2@2x.png) no-repeat 100%
              0%,
            linear-gradient(-45deg, #c1b2ff, #a99eff);
        }
        &:nth-child(3) {
          background: url(../../../assets/images/card/3@2x.png) no-repeat 100%
              0%,
            linear-gradient(-45deg, #ffa645, #ffc157);
        }
        &:nth-child(4) {
          background: url(../../../assets/images/card/4@2x.png) no-repeat 100%
              0%,
            linear-gradient(-45deg, #ff5caa, #ff88c0);
        }
        &:nth-child(5) {
          background: url(../../../assets/images/card/5@2x.png) no-repeat 100%
              0%,
            linear-gradient(-45deg, #c1b2ff, #aa9eff);
        }
        &:not(:last-child) {
          margin-right: 20px;
        }
      }
    }
    .tabBox-wrap {
      padding: 10px 0 15px;
      width: inherit;
      //   height: 500px;
      //   background: pink;

      .content-wrap {
        width: 100%;
        // height: 500px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0px 15px 30px -10px rgba(0, 0, 0, 0.1);
        padding: 10px 20px 20px 20px;
        box-sizing: border-box;
      }
      .pro-content-wrap {
        //    width: 100%;
        display: flex;
        justify-content: space-between;

        div {
          flex: 1;
        }
        > :not(:last-child) {
          margin-right: 20px;
        }
        .left-box {
          .select-box {
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            > span {
              font-size: 14px;
              font-weight: 600;
              color: rgba(0, 0, 0, 0.4);
            }
          }
        }
      }
    }
  }
}
.article-title {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  position: relative;
  span {
    color: rgba(0, 0, 0, 0.4);
  }
  &::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    height: calc(100% - 15px);
    width: 5px;
    transform: translate(0, -50%);
    background-color: #0086ff;
  }
}
.clear {
  &::before {
    content: none;
  }
}
#barLine {
  height: 450px;
  //   width: 100%;
  //   background: red;
}
</style>